<template>
    <el-dialog title="彩色谱" :visible.sync="isShow" width="70%" :lock-scroll="true" :show-close="false">
        <!-- 瀑布图 -->
        <div class="track">
            <div style="flex: 1; height: 100%" id="colorWave" ref="colorWave"></div>
            <div style="width: 85px; height: 60%; display: flex; flex-direction: column; position: relative">
                <div style="height: 40px; width: 100%; font-size: 16px; color: aqua">振幅对照表</div>
                <div v-for="(item, index) in colors" :key="item" style="display: flex; height: 10%">
                    <div :style="`background-color: ${item};width: 35px;height: 100%`"></div>
                    <div style="width: 50px">{{ (split * (10 - index)).toFixed(4) }}</div>
                </div>
                <div style="display: flex; height: 10%">
                    <div :style="`width: 35px;height: 100%`"></div>
                    <div style="width: 50px">{{ 0 }}</div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import * as echarts from 'echarts'
import { specDataGetlistApi } from '@/requset/api'

export default {
    data() {
        return {
            isShow: false,
            spectrumData: [],
            spectrumFre: [],
            colors: ['#FF3300', '#FF9900', '#FFCC00', '#FFFF00', '#D9FF00', '#B3FF00', '#8CFF00', '#60CC80', '#49B3BF', '#3399FF'],
            max: 0,
            split: 0,
        }
    },
    props: {
        sensorInfo: {
            type: Object,
            default() {
                return {}
            },
        },
        tagSelected: {
            type: Object,
            default() {
                return null
            },
        },
        date_time: {
            type: Array,
            default() {
                return []
            },
        },
    },
    methods: {
        getData(nickname) {
            return new Promise((resolve) => {
                specDataGetlistApi({
                    id: this.sensorInfo.id,
                    time: this.dayjs(this.date_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                    feature_key: nickname + 'Fre',
                    limit: 8,
                }).then((res) => {

                    if (res.data.code != 0) return
                    this.spectrumFre = res.data.data.reverse()
                    specDataGetlistApi({
                        id: this.sensorInfo.id,
                        time: this.dayjs(this.date_time[1]).format('YYYY-MM-DD HH:mm:ss'),
                        feature_key: nickname + 'Data',
                        limit: 8,
                    }).then((res) => {

                        if (res.data.code != 0) return
                        this.spectrumData = res.data.data.reverse()
                        resolve()
                    })
                })
            })
        },
        showColorWave() {
            if (this.tagSelected) {
                let value = this.tagSelected.value
                if (value.includes('频谱')) {
                    this.getData(this.tagSelected.nickname).then(() => {
                        if (this.spectrumData.length == 0 || this.spectrumFre.length == 0) {
                            this.$message.info('该时间段暂无数据')
                            return
                        }
                        this.isShow = true
                        this.$nextTick(() => this.draw())
                    })
                } else this.$message.info('请选择频谱')
            } else {
                this.$message.info('请选择频谱')
            }
        },
        draw() {
            let ref = this.$refs.colorWave
            let myChart = echarts.init(ref)
            if (myChart) {
                myChart.clear()
                ref.removeAttribute('_echarts_instance_')
            }

            let legend = []
            let series = []
            this.spectrumData.forEach((item) => {
                item.value.forEach((item1) => {
                    this.max = Math.max(this.max, item1)
                })
            })

            this.split = this.max / 10
            for (let i in this.spectrumFre) {
                legend.push(this.spectrumFre[i].time)
                let data = []
                for (let x in this.spectrumFre[i].value) {
                    data.push({
                        value: [this.spectrumFre[i].value[x], this.spectrumFre[i].time],
                        itemStyle: {
                            color: this.colors[this.spectrumData[i].value[x] === 0 ? 9 : Math.ceil(this.spectrumData[i].value[x] / this.split) - 1],
                        },
                        symbol: 'rect',
                        symbolSize: (document.getElementById('colorWave').offsetHeight - 60) / this.spectrumFre.length,
                    })
                }
                series.push({
                    name: this.spectrumFre[i].time,
                    type: 'line',
                    data: data,
                    colorBy: 'data',
                    emphasis: {
                        disabled: true,
                        focus: 'none',
                    },
                })
            }
            let option = {
                title: {
                    text: '',
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    name: '频率/hz',
                    nameGap: 20,
                    nameTextStyle: {
                        fontSize: 14,
                    },
                },
                yAxis: {
                    type: 'category',
                    show: false,
                },
                grid: {
                    top: 0,
                },
                series: series,
            }
            myChart.setOption(option)
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        },
    },
    watch: {
        isShow: {
            handler(newVal) {
                if (!newVal) {
                    this.spectrumData = []
                    this.spectrumFre = []
                }
            },
        },
    },
}
</script>

<style lang="less">
.track {
    width: 100%;
    height: 60vh;
    display: flex;
}
</style>
